<template>
    <div class='singerlist'>
        <button @click="onBack">返回</button>
        <ul>
            <li v-for="(item,index) in list" :key="item.id+index" @click="onPlay(item.id)">
                {{item.name}}------
                <span v-for="item in item.ar" :key="item.id">{{item.name}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
import axios from "axios"
export default {
    data() {
        return {
            list:[],
            // singer,
        };
    },
    computed: {},
    watch: {},
    
    methods: {
       async ongetList(id){
            let result = await axios.post(
                `http://192.168.1.107:3000/playlist/track/all?id=${id}&limit=20`,
                {
                    withCredentials:true
                });
                // localStorage.setItem('listId',id);
                // console.log("name",result.data.songs)
                this.list = result.data.songs;
        },    
        async onPlay(id){
           let result = await axios.post(
                `http://192.168.1.107:3000/song/detail?ids=${id}`,
                {
                    withCredentials:true
                });
                console.log(111111,result.data.songs[0].id);
                this.$router.push('/detail');
        },   
        async onBack(){
            localStorage.removeItem("listId");
            this.$router.go(-1);
        }, 
    },
    created() {
        const id = localStorage.getItem('listId');
        this.ongetList(id);
    },
    mounted() {
        
    },
    components: {},
    }
</script>
<style scoped>
    .singerlist button{
        width: 60px;
        height: 30px;
        background-color: #eee;
        border:none;
        color:#fff;
    }
    .singerlist li{
        line-height: 26px;
    }
    span{
        margin-right:10px;
    }
</style>